<template>
	<div class="oe-menu oe-stu-menu">
		<div class="oe-menu-container">
			<info-top @toggleCollapsed="toggleCollapsed" :majorBatch="majorBatch" @changeChild="changeChild"></info-top>
			<div class="oe-menu-bar" :class="{ 'close-bar': collapsed }">
				<a-menu :defaultSelectedKeys="defaultKey" :defaultOpenKeys="defaultOpen" mode="inline" theme="dark" :inlineCollapsed="collapsed">
					<!-- <a-sub-menu key="current">
            <span slot="title" class="oe-menu-span">
              <i class="iconfont icon-jinxingzhong title-color" />  
              <span class="oe-menu-title">正在进行</span>
            </span>
            <a-menu-item key="current">
              <router-link :to="{ name: 'current', params: { type: 1 } }">专业考试</router-link>
            </a-menu-item>
          </a-sub-menu> -->
					<!-- <a-menu-item key="majorClass" v-if="isHavaMajor">
            <a-icon type="setting" theme="filled" style="margin-right: 0; color:#fff;" />
            <router-link class="oe-menu-title oe-menu-first" :to="{ name: 'majorClass' }">切换专业分类</router-link>
          </a-menu-item>
          <a-menu-item key="batchList">
            <i class="iconfont icon-shezhi  title-color"></i>
            <router-link class="oe-menu-title oe-menu-first" :to="{ name: 'batchList' }">切换批次</router-link>
          </a-menu-item> -->
					<a-menu-item key="current">
						<i class="iconfont icon-jinxingzhong title-color" />
						<router-link class="oe-menu-title oe-menu-first" :to="{ name: 'current', params: { type: 1 } }">正在进行</router-link>
					</a-menu-item>
					<a-menu-item key="aboutStart">
						<i class="iconfont icon-jijiangkaishi title-color" />
						<router-link class="oe-menu-title oe-menu-first" :to="{ name: 'aboutStart', params: { type: 2 } }">即将开始</router-link>
					</a-menu-item>
					<a-menu-item key="end" style="padding-left:22px;">
						<i class="iconfont icon-time-end title-color" />
						<router-link class="oe-menu-title oe-menu-first end-custome" :to="{ name: 'end', params: { type: 3 } }">已经截止</router-link>
					</a-menu-item>
					<a-sub-menu key="info">
						<span slot="title" class="oe-menu-span">
							<i class="iconfont icon-solid-person title-color" />
							<span class="oe-menu-title">个人信息</span>
						</span>
						<a-menu-item key="stuBaseInfo" class="base-info">
							<router-link :to="{ name: 'stuBaseInfo' }">基本信息</router-link>
						</a-menu-item>
						<!-- <a-menu-item key="realName" class="real-name">
							<router-link :to="{ name: 'realName' }">实名认证</router-link>
						</a-menu-item> -->
						<!-- <a-menu-item key="stuUpdatePwd" class="real-name">
              <router-link :to="{ name: 'stuUpdatePwd' }">修改密码</router-link>
            </a-menu-item> -->
					</a-sub-menu>
				</a-menu>
				<!-- <div class="oe-position">
          <i class="iconfont icon-wenti oe-position-icon"></i>
          帮助
        </div> -->
			</div>
			<div class="oe-menu-content" v-if="reload">
				<a-locale-provider :locale="locales.zh_CN">
					<router-view />
				</a-locale-provider>
			</div>
		</div>
	</div>
</template>

<script>
const { locales } = window.antd;
import infoTop from '@/components/info-top/index.vue';
export default {
	name: 'menu',
	components: {
		infoTop,
	},
	data() {
		return {
			locales,
			// 是否展开或者关闭
			collapsed: false,
			// 用户版本
			level: 3,
			//默认的选择数组
			defaultKey: [],
			// 默认展开的item
			defaultOpen: [],
			menuList: [],
			// zhCN, //中文包
			// 路由列表
			defaultMenuList: {
				current: [
					{
						path: 'current',
						secondList: ['current'],
					},
				],
				aboutStart: [
					{
						path: 'aboutStart',
						secondList: ['aboutStart'],
					},
				],
				end: [
					{
						path: 'end',
						secondList: ['end'],
					},
				],
				info: [
					{
						path: 'stuBaseInfo',
						secondList: ['stuBaseInfo'],
					},
					{
						path: 'realName',
						secondList: ['realName'],
					},
					{
						path: 'stuUpdatePwd',
						secondList: ['stuUpdatePwd'],
					},
				],
			},
			majorBatch: true,
			isShowManager: false,
			isShowStudent: false,
			isHavaMajor: false,
			reload: true,
		};
	},
	watch: {
		$route: {
			handler(newVal) {
				console.log(newVal);
				// 维护路由高亮
				for (const key in this.defaultMenuList) {
					let flag = false;
					for (let i = 0; i < this.defaultMenuList[key].length; i++) {
						flag = this.defaultMenuList[key][i].secondList.includes(newVal.name);
						if (flag) {
							this.defaultOpen = [];
							this.defaultKey = [];
							this.defaultOpen.push(key);
							this.defaultKey.push(this.defaultMenuList[key][i].path);
							break;
						}
					}
				}
			},
			immediate: true,
		},
	},
	beforeRouteEnter(to, from, next) {
		next((vm) => {
			vm.getUserMenu();
		});
	},
	methods: {
		toggleCollapsed(val) {
			this.collapsed = val;
		},
		getUserMenu() {
			this.$http.post('/api/common/localstorage/getUserMenu').then((rst) => {
				if (rst.code == 1) {
					this.menuList = [];
					this.menuList = rst.list;
					this.isShowManager = rst.isShowManager;
					this.isShowStudent = rst.isShowStudent;
				} else {
					this.$message.error(rst.msg);
				}
			});
		},
		// 页面刷新
		changeChild(data) {
			this.reload = data;
		},
	},
};
</script>
<style lang="scss">
.oe-stu-menu {
	.ant-menu-submenu-vertical {
		padding: 0 8px !important;
	}
}
.ant-menu-inline > .ant-menu-item,
.ant-menu-inline > .ant-menu-submenu > .ant-menu-submenu-title,
.ant-menu-vertical-left > .ant-menu-item,
.ant-menu-vertical-left > .ant-menu-submenu > .ant-menu-submenu-title,
.ant-menu-vertical-right > .ant-menu-item,
.ant-menu-vertical-right > .ant-menu-submenu > .ant-menu-submenu-title,
.ant-menu-vertical > .ant-menu-item,
.ant-menu-vertical > .ant-menu-submenu > .ant-menu-submenu-title,
.ant-menu-sub.ant-menu-inline > .ant-menu-item,
.ant-menu-sub.ant-menu-inline > .ant-menu-submenu > .ant-menu-submenu-title {
	height: 52px;
	line-height: 52px;
}

.ant-menu-submenu-popup.ant-menu-dark .ant-menu-item-selected,
.ant-menu.ant-menu-dark .ant-menu-item-selected {
	position: relative;

	&::before {
		position: absolute;
		left: 0;
		top: 9px;
		content: '';
		width: 3px;
		height: 32px;
		background: #ffffff;
		border-radius: 0px 100px 100px 0px;
	}
}

.oe-menu-title {
	margin-left: 20px !important;
}
.end-custome {
	margin-left: 16px !important;
}
.base-info,
.real-name {
	padding-left: 70px !important;
}
</style>
